<template>
  <div>
    <div class="btn-box" @click="onBtnClick">
      <van-icon name="play-circle-o"/>
    </div>
    <van-popup v-model="popupShow" class="video-popup" @close="onClose">
      <VideoPlayer :options="options" ref="videoPlayer"/>
    </van-popup>
  </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer";
export default {
  data() {
    return {
      popupShow: false,
      options: {
        height: document.body.offsetWidth,
        autoplay: this.autoplay,
        sources: [
          {
            type: "video/mp4",
            src: this.src
          }
        ]
      }
    };
  },
  props: {
    src: String,
    autoplay: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onBtnClick() {
      this.popupShow = true;
      this.$nextTick(() => {
        this.$refs.videoPlayer.player.play();
      });
    },
    onClose(e) {
      this.$refs.videoPlayer.player.pause();
    }
  },
  components: {
    VideoPlayer
  }
};
</script>

<style scoped>
.btn-box {
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.3);
  width: 30px;
  height: 30px;
  z-index: 100;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-weight: 800;
}

.video-popup {
  width: 100%;
  max-height: 100%;
  background: transparent;
}

.btn-box:active {
  background: rgba(0, 0, 0, 0.6);
}
</style>

